<template>
  <div class="Message">
    <Header title="消息"></Header>
    <scroller :on-infinite="infinite" ref="myscroller">

      <div style="padding:32px 6px 0 6px">
        <tab :line-width="0" v-model="selected" prevent-default @on-before-index-change="onItemClick">
          <tab-item style="font-size: 15px">公告消息</tab-item>
          <tab-item style="font-size: 15px">充值消息</tab-item>
        </tab>
        <div v-if="selected==0">
          <div v-for="(item,index) in  list" @click="gointo(item)">

            <div style="font-size: 12px;text-align: center;">
              <div v-if="index>0?list[index-1].createTime.substring(0,10)!==item.createTime.substring(0,10):true"
                   style="text-align:center;background: #ddd;padding:0px 8px;width:70px;line-height: 20px;margin: 10px auto;border-radius: 3px;color: #fff">
                {{item.createTime.substring(0,10)}}
              </div>
            </div>

            <div style="margin:8px;height: 80px;background: #fff;display: flex;align-items: center;">
              <div style="width: 80px;text-align: center;">
                <img :src="item.src" style="width: 55px" alt="">
              </div>
              <div style="flex: 1;background: #fff;">
                <p style="font-size: 15px">{{item.title}}</p>
                <p
                  style="color: #999999;font-size: 13px;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;box-orient: vertical;line-clamp: 2;">
                  {{item.content}}
                </p>
              </div>
            </div>

          </div>
        </div>
        <div v-else>
          <div v-for="(item,index) in  list" @click="gointo(item)" class="PayDetaillist">
            <div>
              <div style="font-size: 16px" v-if="item.rechargeType==1">充值{{item.rechargeAmount}}元</div>
              <div style="font-size: 16px" v-if="item.rechargeType==2">
                {{item.setMealSeatType==1?'独立座':'联排座'}}{{item.setMealName}}
              </div>
              <div style="font-size: 14px" v-if="item.payType==1">现金支付</div>
              <div style="font-size: 14px" v-if="item.payType==2">微信支付</div>
              <div style="font-size: 14px" v-if="item.payType==3">支付宝支付</div>
            </div>
            <div>
              <div style="font-size: 16px">{{item.payAmount}}.00</div>
              <div style="font-size: 14px">{{item.payTime}}</div>
            </div>
          </div>
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
  import {Tab, TabItem} from 'vux'
  import Header from './../Header'
  import {SysMessage, MoneyRecord} from '../../api/mine'

  export default {
    name: 'Message',
    data () {
      return {
        selected: 0,
        list: [],
        pageNo: 0,
        pageSize: 0,
        changetab: true
      }
    },
    created () {
      // this.SysMessageList()
    },
    methods: {
      SysMessageList () {
        SysMessage({
          'page-no': this.pageNo,
          'page-size': this.pageSize
        }).then(res => {
          let resultList = res.data.data.resultList
          resultList.map(item => {
            item['src'] = 'static/icon/my_btn_Message-push@3x.png'
          })
          this.list = this.list.concat(resultList)
        })
      },
      gointo (item) {

        if (this.selected == 0) {
          this.$store.dispatch('M_D', {
            info: item
          })
          this.$router.push({
            path: `/Mine/MessageDetail`
          })
        } else {
          this.$store.dispatch('MONEY_MES', {
            MoneyMes: item
          })
          this.$router.push({
            path: `/Mine/MoneyDetail`
          })
        }

      },
      onItemClick (num) {
        debugger
        if (this.changetab) {
          this.$refs.myscroller.loadingState = 0//切换tab时 重新开启上拉加载
          this.list = []
          this.pageNo = 0
          this.pageSize = 0
          this.selected = num
        }

      },
      infinite (done) {
        if (this.changetab) {
          this.pageNo += 1
          this.pageSize += 10
          this.changetab = false
          if (this.selected == 0) {
            SysMessage({
              'page-no': this.pageNo,
              'page-size': this.pageSize
            }).then(res => {
              let resultList = res.data.data.resultList
              resultList.map(item => {
                item['src'] = 'static/icon/my_btn_Message-push@3x.png'
                item['url'] = `/Mine/MessageDetail/${item.id}`
              })
              this.changetab = true
              this.list = this.list.concat(resultList)
              if (resultList.length < 10) {
                done(true)
              }
            })
          } else {
            MoneyRecord({
              'page-no': this.pageNo,
              'page-size': this.pageSize,
            }).then(res => {
              this.list = this.list.concat(res.data.data.resultList)
              this.changetab = true
              if (res.data.data.resultList.length < 10) {
                done(true)
              }
            })
          }
        }
      }
    },
    components: {
      Tab,
      TabItem,
      Header
    },
  }
</script>

<style lang="less" type="text/less">
  .Message {
    .PayDetaillist {
      display: flex;
      background: rgb(255, 255, 255);
      padding: 12px;
      margin-top: 12px;
      align-items: center;
      border-bottom: 1px #F8FAF9 solid;
      & > div {
        flex: 1;
        & > div:last-child {
          color: #9C9C9C;
        }
      }
      & > div:last-child {
        text-align: right;
        & > div:first-child {
          color: @common-color;
        }
      }
    }
    .vux-tab-wrap {
      margin-top: 12px;
    }
    .weui-media-box__bd {
      padding-left: 12px;
    }
    .weui-media-box__title {
      font-size: 15px;
      font-weight: 600;
    }
    .weui-media-box__desc {
      font-size: 12px;
    }
    .Settlement {
      text-align: right;
      border: none;
      font-size: 14px;
      & > span {
        color: @common-color;
      }
    }
    .vux-header-title {
      font-size: 16px !important;
    }
    .vux-tab {
      border-radius: 8px;
      background: #fff;
      color: @common-color;
      .vux-tab-item {
        background: #fff;
      }
    }
    .weui-media-box {
      &:before {
        border: none;
      }
    }
    .weui-panel {
      background: #F8FAF9;
      margin-top: -5px;
      .weui-media-box {
        background: #fff;
        margin-top: 6px;
        border-radius: 5px;
        .weui-media-box__hd {
          width: 55px;
          height: 55px;
        }
      }
      &:before {
        border: none;
      }
      &:after {
        border: none;
      }
    }
  }

</style>
